<template>
  <h1>{{ state.count }}*2={{ double }}</h1>
  <p>{{ num }}</p>
  <button class="add" @click="add">add</button>
</template>

<script>
import { reactive, computed, ref } from "vue"; //更利于tree-shaking
export default {
  setup() {
    // 入口函数:在beforecreate生效
    const state = reactive({
      count: 1,
    });

    const num = ref(10);
    function add() {
      state.count++;
      num.value += 10;
      console.log(state.count);
    }

    const double = computed(() => state.count * 2);
    return { state, add, double, num };
  },
};
</script>

<style>
</style>